<template>
<div class="table-style">
   <h4>产品规格管理</h4>
    <h5 style="color:#545353">商品名称：{{goods.Title}}</h5>
   <div class="spec-wraper">
     <div class="input-wraper">
       <el-form :model="goodsSpec" :rules="rules" ref="goodsSpec" label-width="110px" class="demo-ruleForm">
          <el-form-item label="新增规格类型" prop="newSpec">
            <el-input placeholder="新增规格类型" v-model="goodsSpec.newSpec" class="input-with-select" >
              <el-button slot="append" icon="el-icon-plus" @click="pushNewSpec('goodsSpec',goods.Id)">新增</el-button>
            </el-input>

            <!-- <div class="list-input">
              <el-input v-model="goodsSpec.newSpec" placeholder="新增规格类型"  clearable></el-input>
                <el-button style="margin-left:5px" icon="el-icon-plus" :plain="true" type="primary"   @click="pushNewSpec('goodsSpec',goods.Id)">添加</el-button>
            </div> -->

          </el-form-item>
        </el-form>
       <!-- <span style="width:140px;font-size:14px">新增规格类型：</span>
        <el-input placeholder="新增规格类型..." v-model="newSpec" class="input-with-select" >
          <el-button slot="append" icon="el-icon-plus" @click="pushNewSpec(goods.Id)">添加</el-button>
        </el-input> -->
     </div>
     <!-- 规格添加 -->
     <div class="spec-list">
         <div class="spec-item" v-for="(item,index)  in spec" :key="item.Id">
           <div class="item-name">{{item.Name}}：</div>
           <div class="spec-value" >
             <div class="value-list" :class="item2.Selected?'bg-actvie':'bg'"  v-for="item2 in item.Specvalues" :key="item2.Id" @click="changeSpec(goods.Id,item.Id,item2)">{{item2.Name}}</div>         
           </div>
            <div class="list-input">
              <el-input v-model="inputData[index]" placeholder="添加新值" clearable></el-input>
                <el-button style="margin-left:5px" icon="el-icon-plus" :plain="true" type="primary"  @click="addGoogSpec(goods.Id,item.Id,index)">添加</el-button>
            </div>
         </div>
      </div>
     <!-- 规格表格  -->
     <div class="spec-table">
      <h4>商品规格与价格匹配表</h4>
        <table border="1" cellpadding="10" style="margin:20px 0">
          <thead  class="table-head">
              <tr>
                <th v-for=" (item,index) in tharr">{{item}}</th>
              </tr>
          </thead>

          <tbody>
            <tr v-for="(trstr,index) in tdarr" >
              <td v-for="tdstr in trstr" >{{tdstr}}</td>
              <td v-for="(inputItem,idx) in tdinputarr[index]">
                <input type="text" :value="inputItem"  :data-speckeyid="index" :data-speckeyvalue="idx"  @change="handleInput" >
              </td>   
            </tr>
          </tbody>
          <tr>
            <!-- <td>一月</td>
            <td>1000 元</td> -->
          </tr>
      </table>
      <el-button type="primary" @click="handleUpdatePrice(goods.Id,goods.Mdid)">修改商品对应的价格信息</el-button>
     </div>
   </div>
</div>
</template>

<script>
import {  GoodsKeys, addGoodsKeys, addGoodsSpecKeys, goodsSpecList, updatePrice } from "@/api/mdlist";
export default {
  data() {
    return {
      goodsid:0,
      mdid:'',
      goods:{},
      spec:[],
      goodsSpec:{
        newSpec:""
      },
      inputData:[],
      tharr: [],//表头
      tdarr: [],//内容
      tdinputarr:[], //输入框
      tridarr:[],//输入对应的id
      trnamearr:[],
      rules: {
        newSpec: [
          { required: true, message: '新增规格不能为空', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
     //产品的id
    this.goodsid = this.$route.query.goodsid
    this.mdid = this.$route.query.mdid
    //获得参数
    this.GoodsSpeck(this.goodsid,this.mdid);
  },
  methods: { 
    GoodsSpeck(id,mdid) {
      GoodsKeys({ Goodsid: id,Mdid:mdid }).then((res)=> {
        if (res.code === 0) {
          this.goods = res.data.Goods    
          this.spec = res.data.spec
          this.getProductSizeList(id,this.spec)
        }
      });
    },

    //添加新规格
    pushNewSpec(formName,id){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let value = this.goodsSpec.newSpec
          addGoodsKeys({Goodsid:id,Mdid:this.mdid},{Key:value}).then((res)=> {
            if (res.msg=='success') {
              this.goodsSpec.newSpec = ""
              this.GoodsSpeck(id,this.mdid)
              this.$message.success('添加添加成功');
            }else if(res.msg!= 'success') {
              this.goodsSpec.newSpec = ""
              this.$message.error(res.msg);
            }
          })

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    //添加对应的规格类型
    addGoogSpec(id,keyid,index){
      if (this.inputData[index] == undefined || this.inputData[index] === "" ) {
         this.$message.error('添加的内容不能为空');
         return
      }else {
        let value = this.inputData[index];
        addGoodsSpecKeys({Goodsid:id,Mdid:this.mdid},{Speckeyid:keyid,Specvalue:value}).then((res)=> {
          console.log("aaaaaaaaaaaaa:",res.msg)
          if (res.msg=='success') {
            this.$message.success('添加添加成功');
            this.inputData[index] = ""
            this.GoodsSpeck(id,this.mdid)
          }else if(res.msg!=='success') {
            this.$message.error(res.msg);
             this.inputData[index] = ""
            this.GoodsSpeck(id,this.mdid)
          }
        })    
      }
    




     
      // let value=""
      //  if (inputData.length == 0) {
      //    this.$message.error('添加的内容不能为空');
      //    return
      //  }else {
      //    for (let i = 0; i < inputData.length; i++) {
      //       if (inputData[index] == undefined ||inputData[index] === "" ) {
      //         this.$message.error('添加的内容不能为空');
      //         return
      //       }else {  
      //         value = inputData[index] 
      //         addGoodsSpecKeys({Goodsid:id},{Speckeyid:keyid,Specvalue:value}).then((res)=> {
      //           if (res.msg === '添加成功！') {
      //              this.$message.error('添加添加成功');
      //              inputData[index] = ""
      //             this.GoodsSpeck(id) 
      //           }else if(res.errCode === 1) {
      //             console.log(11111)
      //              this.$message.error(res.msg);
      //              inputData[index] = ""
      //           }
      //         })    
      //       }
      //     }     
      //  }
       
    },

     //规格切换
    changeSpec(id,keyid,item2){
      let spec = this.spec
      for (let i = 0; i < spec.length; i++) {
        if (spec[i].Id === keyid) {
          for (let j = 0; j < spec[i].Specvalues.length; j++) {
            if (spec[i].Specvalues[j].Id === item2.Id) {
              spec[i].Specvalues[j].Selected = spec[i].Specvalues[j].Selected === 1 ? spec[i].Specvalues[j].Selected = 0 : spec[i].Specvalues[j].Selected = 1
            }
          }
        }
      }
      this.getProductSizeList(id,spec)
    },


    //获取规格和价格
    getProductSizeList(id,spec) {    
      //获取规格列表。组合规格
       let selectspeckv = "" //规格组合
        for (let i = 0; i < spec.length; i++) {
          for (let j = 0; j < spec[i].Specvalues.length; j++) {
            if (spec[i].Specvalues[j].Selected === 1) {
              selectspeckv += spec[i].Id + "," + spec[i].Specvalues[j].Id + "|"
            }
          }
        }     
       //提交
       goodsSpecList({Goodsid:id,Mdid:this.mdid},{Specstr:selectspeckv}).then((res)=> {
         if (res.msg=='success') {
           this.tharr = res.data.tharr
           this.tdarr = res.data.tdarr
           this.tdinputarr = res.data.tdinputarr
           this.tridarr = res.data.tridarr
           this.trnamearr = res.data.trnamearr
         }
       }) 
    },

    //修改价格和库存
    handleInput(e){
      let tdinputarr = this.tdinputarr
      tdinputarr[e.target.dataset.speckeyid][e.target.dataset.speckeyvalue] = e.target.value
      console.log(tdinputarr)
    },
    
    //更新价格和库存
    handleUpdatePrice(id,mdid){
      let  pricestr=""
      for(let i=0;i<this.tridarr.length;i++){
        pricestr+=this.tridarr[i]+","+this.tdinputarr[i][0] +","+this.trnamearr[i]+","+this.tdinputarr[i][1]+"|"
      }

      updatePrice({Goodsid:id,Mdid:mdid},{Goodsspecprice:pricestr}).then((res)=> {
       if (res.msg === 'success') {
        this.$message.success('更新成功');
        this.GoodsSpeck(id,mdid)
       }else{
         this.$message.error(res.msg);
       }
      })
    }
    
  },
  
};
</script>

<style>
.table-style {
  width: 100%;
  height: 100%;
  padding: 20px;
}
.spec-wraper {
  width: 100%;
  height: 100%;
  padding: 10px;
  border: 1px solid #dddddd;
  border-radius: 10px;
}
.input-wraper {
  width: 600px;
  padding: 10px 0;
  display: flex;
  align-items: center;
}
.spec-list {
  width: 100%;
  border: 1px dashed #dddddd;
  padding: 10px;
}
.spec-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
}
.item-name {
  font-size: 16px;
  font-weight: 600;
  padding-right: 5px;
}
.spec-value {
 display: flex;
 align-items: center;
 padding: 10px;
 font-size: 14px;
}
.value-list {
  padding: 5px;
  
  margin-right: 10px;
}
.bg-actvie {
  background: #f37e06;
  color: #ffffff;
 
}
.bg {
   background-color: #dddddd;
  color: #000;
}

.list-input {
  width: 200px;
  display: flex;
  align-items: center;
}
.input-type {
  width: 150px;
  height: 36px;
  line-height: 36px;
  border: 1px solid #C0C4CC;
  font-size: 12px;
  border-radius: 4px;
}
.input-btn {
  margin-left: 5px;
  width: 40px;
  height: 34px;
  background-color: #000;
  font-size: 14px;
  color: #fff;
  line-height: 34px;
  text-align: center;
  cursor:pointer
}
.spec-table {
  width: 100%;
  padding: 20px;
  margin-top: 10px;
  background-color:#f4f4f4;
}
</style>